<template>
  <div>
    <div class="collection-container">
      <div class="title">我的收藏</div>
      <a-divider />
      <div class="collection-list">
        <div v-for="item in collectionList" :key="item.id" class="collection-item">
          <div class="colletion-item-first-line">
            <router-link :to="'/blog/' + item.blog.blogId" class="blog-title" v-text="item.blog.blogTitle" />
            <div>
              <span style="color: #999898;font-size: 12px;">收藏于 </span>
              <span style="color: #999898;font-size: 12px;" v-text="item.collectionTime" />
            </div>
          </div>
          <div class="colletion-item-second-line">
            <!-- <div class="blog-type">分类：<a-tag color="green">Java</a-tag></div> -->
            <div class="blog-summary" v-html="item.blog.blogSummary ? item.blog.blogSummary : '暂无预览'" />
          </div>
          <div class="blog-bottom">
            <div>
              <span style="color: #999898;font-size: 12px;">创建于 </span>
              <span style="color: #999898;font-size: 12px;" v-text="item.blog.createdTime" />
            </div>
            <!-- <div class="blog-time">{{ item.blog.createdTime }}</div>
            <div class="blog-meta">
              <a-icon type="eye" /><span style="margin-right: 3px" v-text="item.blog.blogRead" />
              <a-icon type="like" /><span style="margin-right: 3px" v-text="item.blog.blogGoods" />
              <a-icon type="heart" /><span style="margin-right: 3px" v-text="item.blog.blogCollection" />
              <a-icon type="message" /><span style="margin-right: 3px" v-text="item.blog.blogComment" />
            </div> -->
          </div>
        </div>
      </div>
      <div v-if="page.totalPage > 1">
        <a-pagination :default-current="1" :total="page.totalCount" @change="pageChange" />
      </div>
    </div>
  </div>
</template>
<script>
import userApi from '@/api/user'
export default {
  data() {
    return {
      page: {
        currentPage: 1,
        pageSize: 10,
        totalCount: 0,
        totalPage: 0,
        list: []
      },
      collectionList: []
    }
  },
  created() {
    this.getCollectionByPage()
  },
  methods: {
    pageChange(pageNumber) {
      this.page.currentPage = pageNumber
      this.getCollectionByPage()
    },
    getCollectionByPage() {
      this.page.list = null
      userApi.getCollectionByPage(this.page).then(resp => {
        this.page = resp.data
        this.collectionList = resp.data.list
      })
    }
  }
}
</script>
<style scoped>
.title {
  font-size: 20px;
  font-weight: bold;
  color: #3d3d3d;
}
.collection-item {
  width: 100%;
  height: 105px;
  background-color: #fafafa;
  padding: 15px;
  margin-bottom: 10px;
}
.blog-title {
  max-width: 400px;
  font-size: 16px;
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  align-items: center;
  color: #4d4d4d;
}
.blog-title:hover {
  color: #4d4d4d;
}
.blog-bottom {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  font-size: 12px;
  color: #999898;
  margin-bottom: 2px;
  margin-top: 8px;
}
.colletion-item-first-line {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.colletion-item-second-line {
  margin-top: 10px;
}
</style>
